<template>
    <view class="page">
        <view class="head-back">
            <view class="back" @click="onBack">
                <text></text>
            </view>
            <view class="title">
                <!-- <image src="/static/good_title.png" mode=""></image> -->
            </view>
        </view>
        <view class="head-bg">
            <view class="banner">
                <swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
                    <swiper-item v-for="(item,index) in swiperList" :key="index">
                        <image :src="item.url" mode="aspectFill"></image>
                        <!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="goods-data">
            <view class="goods-list">
                <view class="list" v-for="(item,index) in 8" @click="onGoods" :key="index">
                    <view class="thumb">
                        <image :src="'/static/img/goods_thumb_'+(index+11)+'.png'" mode=""></image>
                    </view>
                    <view class="item">
                        <view class="title">
                            <text class="two-omit">Apple 2020新款 MacBook Pro 13.3【带触控栏】十代i5 16G 512G 2.0GHz 深空灰 笔记本电脑 轻薄本 MWP42CHA</text>
                        </view>
                        <view class="introduce">
                            <text class="two-omit">奢华设计，尽显高端品质，真皮材质，给你一种奢侈的享受，独家匠心制作，纯手工打造，设计唯美，大方，出门有面子，朋友羡慕。</text>
                        </view>
                        <view class="like-goods">
                            <view class="like">
                                <text>300人喜欢</text>
                                <text class="iconfont icon-guanzhu"></text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            swiperList: [
                {
                    id: 0,
                    type: 'image',
                    url: '/static/img/banner_01.png'
                },
                {
                    id: 1,
                    type: 'image',
                    url: '/static/img/banner_02.png'
                },
                {
                    id: 2,
                    type: 'image',
                    url: '/static/img/banner_03.png'
                },
                {
                    id: 3,
                    type: 'image',
                    url: '/static/img/banner_04.png'
                },
                {
                    id: 4,
                    type: 'image',
                    url: '/static/img/banner_01.png'
                },
                {
                    id: 5,
                    type: 'image',
                    url: '/static/img/banner_01.png'
                }
            ],
        };
    },
    methods: {
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        /**
         * 商品点击
         */
        onGoods() {
            uni.navigateTo({
                url: '/pagesA/index/articleDetails'
            })
        }
    }
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  padding-bottom: 40rpx;
}

.head-back {
  position: relative;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100rpx;
  background: linear-gradient(to right, #00b6a5, #00ccba);
  /* #ifdef APP-PLUS */
  height: calc(120rpx + var(--status-bar-height));
  padding-top: var(--status-bar-height);
  /* #endif */
  /* #ifdef MP */
  height: 150rpx;
  padding-top: var(--status-bar-height);
  /* #endif */
  .back {
    position: absolute;
    left: 0;
    top: 0;
    /* #ifdef APP-PLUS */
    top: var(--status-bar-height);
    /* #endif */
    /* #ifdef MP */
    top: var(--status-bar-height);
    /* #endif */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 100rpx;
    text {
      display: flex;
      width: 20rpx;
      height: 20rpx;
      border-left: 2rpx solid #ffffff;
      border-bottom: 2rpx solid #ffffff;
      transform: rotate(45deg);
    }
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
    image {
      width: 200rpx;
      height: 50rpx;
    }
  }
}

.head-bg {
  width: 100%;
  height: calc(300rpx + var(--status-bar-height));
  background: linear-gradient(to right, #00b6a5, #00ccba);
  border-radius: 0 0 20% 20%;
  padding-top: 100rpx;
  /* #ifdef APP-PLUS */
  padding-top: calc(100rpx + var(--status-bar-height));
  /* #endif */
  /* #ifdef MP */
  padding-top: calc(100rpx + var(--status-bar-height));
  /* #endif */
  // banner
  .banner {
    width: 90%;
    height: 300rpx;
    border-radius: 10rpx;
    overflow: hidden;
    margin: 20rpx auto;
    .screen-swiper {
      min-height: 100% !important;
      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
  }
}

.goods-data {
  width: 100%;
  margin-top: 160rpx;
  /* #ifdef APP-PLUS */
  margin-top: 150rpx;
  /* #endif */
  /* #ifdef MP */
  margin-top: calc(100rpx + var(--status-bar-height));
  /* #endif */
  .goods-list {
    width: 94%;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 20rpx;
    .list {
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      height: 300rpx;
      margin-bottom: 20rpx;
      .thumb {
        display: flex;
        align-items: center;
        width: 40%;
        height: 100%;
        image {
          width: 260rpx;
          height: 260rpx;
          border-radius: 10rpx;
        }
      }
      .item {
        width: 56%;
        height: 260rpx;
        margin-left: 4%;
        .title {
          display: flex;
          align-items: center;
          width: 100%;
          height: 100rpx;
          text {
            font-size: 28rpx;
            color: #222222;
          }
        }
        .introduce {
          display: flex;
          align-items: center;
          width: 100%;
          text {
            font-size: 24rpx;
            color: #c0c0c0;
          }
        }
        .like-goods {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 100%;
          height: 100rpx;
          .like {
            display: flex;
            align-items: center;
            text {
              font-size: 26rpx;
              font-weight: bold;
              color: $base;
            }
            .iconfont {
              margin-left: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>
